<template>
<div class="maincontent" v-loading.body="loading">
  <el-card class="box-card">
    <div class="breadcrumb" slot="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{name:'订单管理'}">订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="boxtitle">
      <div class="title">
        商品信息
      </div>
    </div>
    <div class="textinfo">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form label-width="100px">
            <el-form-item label="商品名称:">
              {{orderinfo.goods_name}}
            </el-form-item>
            <el-form-item label="商品类别:">
              {{orderinfo.goods_option}}
            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="100px">
            <el-form-item label="购买价格:">
              <span class="money">￥{{orderinfo.trad_price}}</span>
            </el-form-item>
            <el-form-item label="购买数量:">
              {{orderinfo.num}}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

  </el-card>
  <el-card class="box-card" style="margin-top:10px">
    <div class="boxtitle">
      <div class="title">
        订单信息
      </div>
    </div>
    <div class="textinfo">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form label-width="100px">
            <el-form-item label="订单编号:">
              {{orderinfo.order_no}}
            </el-form-item>
            <el-form-item label="订单状态:">
              {{ordertypes[orderinfo.order_state]}}
            </el-form-item>
            <el-form-item label="总收款:">
              <span class="money">￥{{orderinfo.trad_price*orderinfo.num}}</span>
            </el-form-item>
            <el-form-item label="付款时间:">
              <span v-if="orderinfo.payment_time">  {{datefromate(orderinfo.payment_time.time)}}</span>

            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="12">
          <el-form label-width="100px">
            <el-form-item label="购买者:">
              {{orderinfo.store_name}}
            </el-form-item>
            <el-form-item label="物流地址:">
              {{orderinfo.adress}}
            </el-form-item>
            <el-form-item label="买家留言:">
              {{orderinfo.message}}
            </el-form-item>
            <el-form-item label="快递单号:">
              {{orderinfo.express_no}} <i class="el-icon-edit" @click="Visiblefahuo=true"></i>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div style="text-align:center;margin-top:30px" v-if="orderinfo.order_state==2">
        <el-button type="primary" @click="Visiblefahuo=true">确认发货</el-button>
      </div>

    </div>
  </el-card>

    <el-dialog title="填写物流单号" :visible.sync="Visiblefahuo">
      <el-form label-width="80px">
        <el-form-item label="物流单号:" >
          <el-input v-model="ediordernum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="Visiblefahuo = false">取 消</el-button>
          <el-button type="primary" @click="wuliunum">确 定</el-button>
      </div>
    </el-dialog>
</div>
</template>
<script >
import until from "../until/until";
import API from "../API";
import merge from "../until/merge"
export default {
  data() {
    return {
      orderinfo:{},
      loading:false,
      ordertypes: until.ordertypes,
      Visiblefahuo:false,
      ediordernum:""
    }
  },
  mounted() {
    this.initdata();
  },
  methods: {
    initdata(){
      this.loading=true;
      API.orderDetailByCode({
        order_no:this.$route.params.id
      }).then((res)=>{
        this.loading=false;
        let json=res.data;
        if (json.message=="success") {
          this.orderinfo=json.infomap;
        }else {
          this.$message({
            showClose: true,
            message: '查询失败',
            type: 'error'
          });
        }
      }).catch(()=>{
        this.loading=false;
      })

    },
    datefromate(item){
        return until.dateFtt("yyyy-MM-dd hh:mm:ss",new Date(item))
    },
    wuliunum(){
      this.loading=true;
      API.updateOrderState({
        order_no:this.$route.params.id,
        order_state:3,
        express_no:this.ediordernum
      }).then((res)=>{
        this.loading=false;
        let json=res.data;
        if (json.message=="success") {
          this.orderinfo.express_no=this.ediordernum;
          this.orderinfo.order_state=3;
          if(this.orderinfo.order_state==3){
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
          }else {
            this.$notify({
              title: '成功',
              message: '发货成功',
              type: 'success'
            });
          }

          this.Visiblefahuo=false;
        }else {
          this.$notify({
            title: '失败',
            message: '发货失败',
            type: 'error'
          });
        }
      }).catch(()=>{
        this.loading=false;
      })
    }
  },
  watch:{
    Visiblefahuo(newval){
      if (!newval) {
        this.ediordernum="";
      }
    }
  }
}
</script>
<style lang="less">
@import "../css/orderinfo.less";
</style>
